{{ 'compare-select.css' | asset_url | stylesheet_tag }}
{%- assign blocks = section.blocks -%}
<script>
  var htmlEle = document.documentElement;
  var reload = "orientationchange" in window ? "orientationchange": "resize";
  $('html').addClass('v-clock'); // 控制屏幕闪动
  function handler () {
    var clientWidth = htmlEle.clientWidth;
    if(!clientWidth) return;
    if (clientWidth <= 750) {
      htmlEle.classList.add('is-mobile');
    } else {
      htmlEle.classList.remove('is-mobile');
    }
  };
  window.addEventListener(reload, handler, false);
  document.addEventListener("DOMContentLoaded", handler,false);
  document.addEventListener("DOMContentLoaded", () => {
    $('html').removeClass('v-clock');
  });
  
  $("html").addClass('compare-more-product');
</script>
<style>
  .compare-product-new #shopify-section-header{
    position: sticky;
    top: 0;
  } 
  .cpmpare-shape-container {
    position: relative;
    text-align: center;
  }
  .cpmpare-shape-point, .compare-value-shape {
    position: absolute;
    top: 0;
    left: 0;
  }
  .cpmpare-shape-point {
    color: var(--grey-100, #333);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
  }
  .compare-value-shape {
    left: 50%;
    transform: translate(-50%, 0);
  }
  .cpmpare-shape-point_1 {
    left: 50%;
    transform: translate(-50%, 0);
    top: -20px;
  }
  .cpmpare-shape-point_2 {
    left: -5px;
    top: 60px;
  }
  .cpmpare-shape-point_3 {
    left: 25px;
    bottom: 8px;
    top: unset;
  }
  .cpmpare-shape-point_4 {
    right: 15px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
  }
  .cpmpare-shape-point_5 {
    right: -7px;
    top: 54px;
    left: unset;
    text-align: left;
  }
  .cpmpare-value-shape-bg {
    text-align: center;
  }
 

  html[lang=nl] .cpmpare-shape-point_2 {
    transform: scale(0.9);
  }

  html[lang=nl] .cpmpare-shape-point_3 {
    left: -2px;
    bottom: 8px;
    top: unset;
    transform: scale(0.9);
  }
  html[lang=nl] .cpmpare-shape-point_5 {
    right: -43px;
    top: 54px;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=nl] .cpmpare-shape-point_4 {
    right: -15px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
 

  html[lang=es] .cpmpare-shape-point_2 {
    transform: scale(0.9);
  }

  html[lang=es] .cpmpare-shape-point_3 {
    left: 27px;
    bottom: 5px;
    top: unset;
    transform: scale(0.9);
  }
  html[lang=es] .cpmpare-shape-point_5 {
    right: -25px;
    top: 54px;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=es] .cpmpare-shape-point_4 {
    right: 10px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=it] .cpmpare-shape-point_2 {
    transform: scale(0.9);
  }

  html[lang=it] .cpmpare-shape-point_3 {
    left: 12px;
    bottom: 5px;
    top: unset;
    transform: scale(0.9);
  }
  html[lang=it] .cpmpare-shape-point_5 {
    right: -25px;
    top: 54px;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=it] .cpmpare-shape-point_4 {
    right: 0px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=fr] .cpmpare-shape-point_2 {
    transform: scale(0.9);
  }

  html[lang=fr] .cpmpare-shape-point_3 {
    left: 12px;
    bottom: 5px;
    top: unset;
    transform: scale(0.9);
  }
  html[lang=fr] .cpmpare-shape-point_5 {
    right: -25px;
    top: 54px;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=fr] .cpmpare-shape-point_4 {
    right: 15px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }

  html[lang=de] .cpmpare-shape-point_2 {
    transform: scale(0.9);
  }

  html[lang=de] .cpmpare-shape-point_3 {
    left: -3px;
    bottom: 5px;
    top: unset;
    transform: scale(0.9);
  }
  html[lang=de] .cpmpare-shape-point_5 {
    right: -13px;
    top: 54px;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
  html[lang=de] .cpmpare-shape-point_4 {
    right: 20px;
    bottom: 8px;
    top: unset;
    left: unset;
    text-align: left;
    transform: scale(0.9);
  }
</style>

<div class="ebike-compare-select">
  <div class="ebike-compare-select-wrapper">
    <div class="page-width">
      <h2 class="title"><span class="title-item">{{ section.settings.title1 }}</span><span class="title-item"> {{ section.settings.title2 }}</span></h2>
    </div>
    <div class="page-block compare-select-content" id="compare-select-handler" style="background: #ffff;">
      <div class="compare-select-content-wrapper">
        <div class="selector-table template-dropdown compare-select-container">
          <div class="compare-row">
            {% for block in section.blocks limit:3 %}
              <div class="selector-element-container">
                <div class="selector-element {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}" data-index="{{ forloop.index }}">
                  <div class="selector-dropdown">{{ block.settings.id }}</div>
                  <div class="icon-caret-container">
                    {% render 'icon-caret' %}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
          <div class="template-wrapper">
            <div class="content-wrapper">
              <div class="content-wrapper__container">
                {% for block in section.blocks %}
                  <div class="content-item" data-index="{{forloop.index}}" data-id="{{ block.settings.id }}">
                    <div class="image-with-text__media {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                      {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                    >
                      {%- if block.settings.image != blank -%}
                        <img
                          srcset="{%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                            {%- if block.settings.image.width >= 600 -%}{{ block.settings.image | img_url: '600x' }} 600w,{%- endif -%}
                            {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                            {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                            {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                            {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                          src="{{ block.settings.image | img_url: '1500x' }}"
                          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                          alt="{{ block.settings.image.alt | escape }}"
                          loading="lazy"
                          width="{{ block.settings.image.width }}"
                          height="{{ block.settings.image.height }}"
                        >
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                      {%- endif -%}
                    </div>
                    <p class="content-item_title">{{ block.settings.id  }}</p>
                  </div>
                  {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="product-compare-list">
      <div class="product-compare-wrapper" id="product-compare-wrapper">
        <div class="compare-row compare-row-media">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <div data-index="{{forloop.index}}" data-id="{{ block.settings.id }}" data-image="{{ block.settings.image }}" class="image-with-text__media {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                  {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
                >
                  {%- if block.settings.image != blank -%}
                    <img
                      id = "image_value_{{forloop.index}}"
                      srcset="{%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.image.width >= 600 -%}{{ block.settings.image | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                      src="{{ block.settings.image | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.image.alt | escape }}"
                      loading="lazy"
                      width="{{ block.settings.image.width }}"
                      height="{{ block.settings.image.height }}"
                    >
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
              </li>
              <li class="compare-value compare-price" id="price_value_{{ forloop.index }}"> {{ block.settings.product.price | money }} 
                <span class="compare_at_price" id="compare_at_price_value_{{ forloop.index }}">{{ block.settings.product.compare_at_price | money }}</span> 
              </li>
              <li class="compare-btton compare-order-now">
                <a class="order-link" id="order_value_{{ forloop.index }}" data-link="{{ block.settings.order }}" href="{{ block.settings.order }}"> {{ section.settings.ordernow  }}</a>
              </li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="product-compare-wrapper__title">{{ section.settings.basic }}</div>
        <div class="compare-row compare-row-shape">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <div class="cpmpare-shape-container">
              <span class="cpmpare-shape-point cpmpare-shape-point_1">{{ section.settings.shape_feature_1 }}</span>
              <span class="cpmpare-shape-point cpmpare-shape-point_2">{{ section.settings.shape_feature_2 }}</span>
              <span class="cpmpare-shape-point cpmpare-shape-point_3">{{ section.settings.shape_feature_3 }}</span>
              <span class="cpmpare-shape-point cpmpare-shape-point_4">{{ section.settings.shape_feature_4 }}</span>
              <span class="cpmpare-shape-point cpmpare-shape-point_5">{{ section.settings.shape_feature_5 }}</span>
              <div class="cpmpare-value-shape-bg">
                {{ section.settings.base_shape }}
              </div>
              <div class="compare-value compare-value-shape">
                <div id="shape_value_{{ forloop.index }}">
                  {{ block.settings.shape }}
                </div>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-value compare-value-riders">
                <strong id="riders1_value_{{ forloop.index }}">{{ block.settings.riders1 }}</strong>
                <br/>
                <span class="compare-value-riders-level2" id="riders2_value_{{ forloop.index }}">{{ block.settings.riders2 }}</span>
                <br/>
                <span id="riders3_value_{{ forloop.index }}">{{ block.settings.riders3 }}</span>
              </li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="KG_icon_value_{{ forloop.index }}">{{ block.settings.KG_icon }}</li>
              <li class="compare-value" id="KG_value_{{ forloop.index }}">{{ block.settings.KG }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="speed_icon_value_{{ forloop.index }}">
                {{ block.settings.speed_icon }}
              </li>
              <li class="compare-value" id="speed_value_{{ forloop.index }}">{{ block.settings.speed }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <strong class="compare-icon_kg2" id="KG2_icon_value_{{ forloop.index }}">{{ block.settings.KG2_icon  }}</strong>
              </li>
              <li class="compare-value" id="KG2_value_{{ forloop.index }}">{{ block.settings.KG2 }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="kilometre_icon_value_{{ forloop.index }}">
                {{ block.settings.kilometre_icon }}
              </li>
              <li class="compare-value" id="kilometre_value_{{ forloop.index }}">{{ block.settings.kilometre }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <strong class="compare-icon_powericon" id="power_icon_value_{{ forloop.index }}">{{  block.settings.power_icon }}</strong>
              </li>
              <li class="compare-value" id="power_value_{{ forloop.index }}">{{ block.settings.power }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="frame_icon_value_{{ forloop.index }}">
                {{ block.settings.frame_icon }}
              </li>
              <li class="compare-value" id="frame_value_{{ forloop.index }}">{{ block.settings.frame }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <div data-index="{{forloop.index}}" data-id="{{ block.settings.id }}" data-image="{{ block.settings.color_icon }}" class="image-with-text__media {% if block.settings.color_icon != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                  {% if block.settings.color_icon != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.color_icon.aspect_ratio | times: 100 }}%;"{% endif %}
                >
                  {%- if block.settings.color_icon != blank -%}
                    <img
                      id = "color_icon_value_{{forloop.index}}"
                      srcset="{%- if block.settings.color_icon.width >= 323 -%}{{ block.settings.color_icon | img_url: '323x' }} 323w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 360 -%}{{ block.settings.color_icon | img_url: '360x' }} 360w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 535 -%}{{ block.settings.color_icon | img_url: '535x' }} 535w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 600 -%}{{ block.settings.color_icon | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 750 -%}{{ block.settings.color_icon | img_url: '750x' }} 750w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 1070 -%}{{ block.settings.color_icon | img_url: '1070x' }} 1070w,{%- endif -%}
                        {%- if block.settings.color_icon.width >= 1500 -%}{{ block.settings.color_icon | img_url: '1500x' }} 1500w,{%- endif -%}
                        {{ block.settings.color_icon | img_url: 'master' }} {{ block.settings.color_icon.width }}w"
                      src="{{ block.settings.color_icon | img_url: '1500x' }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                      alt="{{ block.settings.color_icon.alt | escape }}"
                      loading="lazy"
                      width="{{ block.settings.color_icon.width }}"
                      height="{{ block.settings.color_icon.height }}"
                    >
                  {%- endif -%}
                </div>
              </li>
              <li class="compare-value" id="color_value_{{ forloop.index }}">{{ block.settings.color }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="product-compare-wrapper__title">{{ section.settings.electronics }}</div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <strong class="compare-icon_battery_text" id="battery_icon_value_{{ forloop.index }}">{{ block.settings.battery_icon }}</strong>
              </li>
              <li class="compare-value" id="battery_value_{{ forloop.index }}">{{ block.settings.battery }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="sensor_icon_value_{{ forloop.index }}">
                {{ block.settings.sensor_icon }}
              </li>
              <li class="compare-value" id="sensor_value_{{ forloop.index }}">{{ block.settings.sensor }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="engine_icon_value_{{ forloop.index }}">
                {{ block.settings.engine_icon }}
              </li>
              <li class="compare-value" id="engine_value_{{ forloop.index }}">{{ block.settings.engine }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="display_icon_value_{{ forloop.index }}">
                {{ block.settings.display_icon }}
              </li>
              <li class="compare-value" id="display_value_{{ forloop.index }}">{{ block.settings.display }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="product-compare-wrapper__title">{{ section.settings.other }}</div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="belt_icon_value_{{ forloop.index }}">
                {{ block.settings.belt_icon }}
              </li>
              <li class="compare-value" id="belt_value_{{ forloop.index }}">{{ block.settings.belt }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="discbreak_icon_value_{{ forloop.index }}">
                {{ block.settings.discbreak_icon }}
              </li>
              <li class="compare-value" id="discbreak_value_{{ forloop.index }}">{{ block.settings.discbreak }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon">
                <strong class="compare-icon-tires" id="tires_icon_value_{{ forloop.index }}">{{ block.settings.tires_icon }}</strong>
              </li>
              <li class="compare-value" id="tires_value_{{ forloop.index }}">{{ block.settings.tires }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-icon" id="seat_icon_value_{{ forloop.index }}">
                {{ block.settings.seat_icon }}
              </li>
              <li class="compare-value" id="seat_value_{{ forloop.index }}">{{ block.settings.seat }}</li>
            </ul>
          </div>
          {% endfor %}
        </div>
        <div class="compare-row">
          {% for block in blocks limit: 3 %}
          <div class="compare-column template-badge-list {%- if forloop.index == 3 -%}{{' compare-column-extra'}}{%- endif -%}">
            <ul>
              <li class="compare-btton compare-explore">
                <a class="explore_link" id="explore_value_{{ forloop.index }}" data-link="{{ block.settings.explore }}" href="{{ block.settings.explore }}">{{ section.settings.explore  }}</a>
              </li>
            </ul>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  
  <script>let catList = [];</script>
  {%- for block in blocks -%}
    <script>
      catList.push({
        shape: `{{ block.settings.shape }}`,
        id: `{{ block.settings.id }}`,
        riders1: `{{ block.settings.riders1 }}`,
        riders2: `{{ block.settings.riders2 }}`,
        riders3: `{{ block.settings.riders3 }}`,
        KG_icon: `{{ block.settings.KG_icon }}`,
        KG: `{{ block.settings.KG }}`,
        speed_icon: `{{ block.settings.speed_icon }}`,
        speed: `{{ block.settings.speed }}`,
        KG2_icon: `{{ block.settings.KG2_icon }}`,
        KG2: `{{ block.settings.KG2 }}`,
        kilometre_icon: `{{ block.settings.kilometre_icon }}`,
        kilometre: `{{ block.settings.kilometre }}`,
        power_icon: `{{ block.settings.power_icon }}`,
        power: `{{ block.settings.power }}`,
        frame_icon: `{{ block.settings.frame_icon }}`,
        frame: `{{ block.settings.frame }}`,
        battery_icon: `{{ block.settings.battery_icon }}`,
        battery: `{{ block.settings.battery }}`,
        sensor_icon: `{{ block.settings.sensor_icon }}`,
        sensor: `{{ block.settings.sensor }}`,
        engine_icon: `{{ block.settings.engine_icon }}`,
        engine: `{{ block.settings.engine }}`,
        display_icon: `{{ block.settings.display_icon }}`,
        display: `{{ block.settings.display }}`,
        belt_icon: `{{ block.settings.belt_icon }}`,
        belt: `{{ block.settings.belt }}`,
        discbreak_icon: `{{ block.settings.discbreak_icon }}`,
        discbreak: `{{ block.settings.discbreak }}`,
        tires_icon: `{{ block.settings.tires_icon }}`,
        tires: `{{ block.settings.tires }}`,
        seat_icon: `{{ block.settings.seat_icon }}`,
        seat: `{{ block.settings.seat }}`,
        price: `{{ block.settings.product.price | money }}`,
        compare_at_price: `{{ block.settings.product.compare_at_price | money }}`,
        color_icon: `{{ block.settings.color_icon }}`,
        color: `{{ block.settings.color }}`,
        order: `{{ block.settings.order }}`,
        explore: `{{ block.settings.explore }}`,
        image: {
          srcset: `{%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                {%- if block.settings.image.width >= 600 -%}{{ block.settings.image | img_url: '600x' }} 600w,{%- endif -%}
                {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w`,
          src: `{{ block.settings.image | img_url: '1500x' }}`,
          alt: `{{ block.settings.image.alt | escape }}`,
          width: `{{ block.settings.image.width }}`,
          height:`{{ block.settings.image.height }}`,
          sizes: `(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)`,
          aspect_ratio: `{{ block.settings.image.aspect_ratio }}`,
          placehoder: `{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}`
        },
        color_icon: {
          srcset: `{%- if block.settings.color_icon.width >= 323 -%}{{ block.settings.color_icon | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 360 -%}{{ block.settings.color_icon | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 535 -%}{{ block.settings.color_icon | img_url: '535x' }} 535w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 600 -%}{{ block.settings.color_icon | img_url: '600x' }} 600w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 750 -%}{{ block.settings.color_icon | img_url: '750x' }} 750w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 1070 -%}{{ block.settings.color_icon | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if block.settings.color_icon.width >= 1500 -%}{{ block.settings.color_icon | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ block.settings.color_icon | img_url: 'master' }} {{ block.settings.color_icon.width }}w`,
          src: `{{ block.settings.color_icon | img_url: '1500x' }}`,
          alt: `{{ block.settings.color_icon.alt | escape }}`,
          width: `{{ block.settings.color_icon.width }}`,
          height:`{{ block.settings.color_icon.height }}`,
          sizes: `(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)`,
          aspect_ratio: `{{ block.settings.color_icon.aspect_ratio }}`,
          placehoder: `{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}`
        }
      })
    </script>
  {%- endfor -%}
  <script>
    if (/&debug/.test(location.search)) {
      console.log(catList);
    }
  </script>
  <div class="mark"></div>
</div>
<script>
  
$.fn.removeClassRegex = function(regex) {
  return $(this).removeClass(function(index, classes) {
    return classes.split(/\s+/).filter(function(c) {
      return regex.test(c);
    }).join(' ');
  });
};

  $(window).ready(function() {
    $('.selector-element').on('click', function (event) {
      // 存在节点
      const selectedNode = $('.selector-element.selected');
      if (selectedNode.length === 0 || selectedNode.data('index') === $(this).data('index')) {
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
        } else {
          $('.selector-element').removeClass('selected')
          $(this).addClass('selected');
        }
        if ($('html').hasClass('open_template_wrapper')) {
          $('html').removeClass('open_template_wrapper');
          $('html').removeClassRegex(/^open_template_wrapper_/)
        } else {
          $('html').addClass('open_template_wrapper');
          $('html').addClass(`open_template_wrapper_${ $(this).data('index') }`);
        }
      } else {
        $('.selector-element').removeClass('selected');
        $(this).addClass('selected');
        $('html').removeClassRegex(/^open_template_wrapper_/);
        $('html').addClass(`open_template_wrapper_${ $(this).data('index') }`);
      }
      event.stopPropagation();
    })
    
    $(window).scroll(() => {
      let offseTop = 0;
      let isMobile = $('html').hasClass('is-mobile');
      if (isMobile) {
        offseTop = $('.ebike-compare-select-wrapper').outerHeight();
      } else {
        offseTop = $('.ebike-compare-select-wrapper').outerHeight() - $('.header-wrapper').height();
      }
      
      const topHeight = $('.b-header').height();
      if (window.scrollY > offseTop) {
        $("html").addClass('is-fixed');
        $("#compare-select-handler").css({
          'position': 'fixed',
          'top': `${topHeight}px`,
          'width': '100%'
        })
      } else {
        $("html").removeClass('is-fixed');
        $("#compare-select-handler").css({
          'position': 'absolute',
          'width': '100%',
          'top': 'auto'
        })
      }
    })
    
    // render column
    function render(column, productId) {
      let node = $('#product-compare-wrapper');
      let sourceData = catList.find((item) => item.id === productId);
      Object.keys(sourceData).forEach((key) => {
        if (key === 'image' || key ==='color_icon') {
          let imgNode = $(`#${key}_value_${column}`);
          imgNode.attr('srcset', sourceData[key]['srcset']);
          imgNode.attr('src', sourceData[key]['src']);
          imgNode.attr('alt', sourceData[key]['alt']);
          imgNode.attr('width', sourceData[key]['width']);
          imgNode.attr('height', sourceData[key]['height']);
          imgNode.attr('sizes', sourceData[key]['sizes']);
          } else if (key === 'order' || key === 'explore') {
            $(`#${key}_value_${column}`).attr('href', sourceData[key]);
          } else if (key === 'price') {
            $(`#${key}_value_${column}`).html(`<span>${sourceData['price']}</span><span class="compare_at_price">${sourceData['compare_at_price']}</span>`);
          } else {
            $(`#${key}_value_${column}`).html(sourceData[key]);
          }
      })
    }
    /*
    function reRender (targetId) {
      const itemList = $(".content-wrapper__container .content-item");
      itemList.removeClass('disable-select');
      for (let i = 0; i < itemList.length; i++) {
        console.log(itemList[i].dataset.id);
        if (itemList[i].dataset.id === targetId) {
          itemList[i].addClass('disable-select');
        }
      }
    }
    */
    
    $('.content-item').on('click', function (event) {
      const index = $('.selector-element.selected').data('index');
      const productId = $(this).data('id');
      $('.selector-element.selected').data('selected-id', $(this).data('id'));
      $('.selector-element.selected .selector-dropdown').text($(this).data('id'));
      render(index, productId);
      $('html').removeClass('open_template_wrapper');
      $('html').removeClassRegex(/^open_template_wrapper_/);
      $('.selector-element.selected').removeClass('selected');
      // reRender(productId);
      
      event.stopPropagation();
    });
    
    
    $('.mark').on('click', () => {
      $('.selector-element.selected').removeClass('selected')
      $('html').removeClass('open_template_wrapper');
      $('html').removeClassRegex(/^open_template_wrapper_/)
    })
    
    $(document).click((event) => {
      if ($(event.target).hasClass('content-item') || $(event.target).hasClass('selector-element')) {
        return;
      } else {
        $('.selector-element.selected').removeClass('selected')
        $('html').removeClass('open_template_wrapper');
        $('html').removeClassRegex(/^open_template_wrapper_/)
      }
    })
  });
</script>

{% schema %}
  {
    "name": "Compare Select",
    "tag": "section",
    "class": "spaced-section compare-section compare-product",
    "settings": [
      {
        "type": "text",
        "id": "title1",
        "label": "Title1"
      },
      {
        "type": "text",
        "id": "title2",
        "label": "Title2"
      },
      {
        "type": "text",
        "id": "basic",
        "label": "Basic Info"
      },
      {
        "type": "text",
        "id": "electronics",
        "label": "Electronics"
      },
      {
        "type": "text",
        "id": "other",
        "label": "Other Components"
      },
      {
        "type": "text",
        "id": "ordernow",
        "label": "Order Now"
      },
      {
        "type": "text",
        "id": "explore",
        "label": "Explore"
      },
      {
        "type": "html",
        "id": "base_shape",
        "label": "Basic Shape"
      },
      {
        "type": "html",
        "id": "shape_feature_1",
        "label": "shape_feature_1"
      },
      {
        "type": "html",
        "id": "shape_feature_2",
        "label": "shape_feature_2"
      },
      {
        "type": "html",
        "id": "shape_feature_3",
        "label": "shape_feature_3"
      },
      {
        "type": "html",
        "id": "shape_feature_4",
        "label": "shape_feature_4"
      },
      {
        "type": "html",
        "id": "shape_feature_5",
        "label": "shape_feature_5"
      }
    ],
    "blocks": [
      {
        "type": "ProductInfo",
        "name": "ProductInfo",
        "settings": [
          {
            "type": "text",
            "id": "id",
            "label": "ID"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "image"
          },
          {
            "type": "product",
            "id": "product",
            "label": "Product"
          },
          {
            "type": "html",
            "id": "shape",
            "label": "Shape"
          },
          {
            "type": "html",
            "id": "riders1",
            "label": "For riders1"
          },
          {
            "type": "html",
            "id": "riders2",
            "label": "For riders2"
          },
          {
            "type": "html",
            "id": "riders3",
            "label": "For riders3"
          },
          {
            "type": "html",
            "id": "KG_icon",
            "label": "KG Icon"
          },
          {
            "type": "html",
            "id": "KG",
            "label": "KG"
          }, 
          {
            "type": "html",
            "id": "speed_icon",
            "label": "speed Icon"
          },
          {
            "type": "html",
            "id": "speed",
            "label": "speed"
          }, 
          {
            "type": "text",
            "id": "KG2_icon",
            "default": "120kg",
            "label": "Max load icon"
          },
          {
            "type": "text",
            "id": "KG2",
            "label": "Max load"
          }, 
          {
            "type": "html",
            "id": "kilometre_icon",
            "label": "kilometre Icon"
          },{
            "type": "html",
            "id": "kilometre",
            "label": "kilometre"
          }, 
          {
            "type": "text",
            "id": "power_icon",
            "default": "4.5h",
            "label": "Power icon"
          },
          {
            "type": "text",
            "id": "power",
            "label": "Power Time"
          }, 
          {
            "type": "html",
            "id": "frame_icon",
            "label": "frame Icon"
          },
          {
            "type": "html",
            "id": "frame",
            "label": "frame"
          },
          {
            "type": "html",
            "id": "battery_icon",
            "default": "36V,10Ah",
            "label": "battery Icon"
          },
          {
            "type": "html",
            "id": "battery",
            "label": "battery Text"
          }, {
            "type": "html",
            "id": "sensor_icon",
            "label": "sensor Icon"
          },{
            "type": "html",
            "id": "sensor",
            "label": "sensor"
          },
          {
            "type": "html",
            "id": "engine_icon",
            "label": "engine Icon"
          },
          {
            "type": "html",
            "id": "engine",
            "label": "engine"
          },
          {
            "type": "html",
            "id": "display_icon",
            "label": "display Icon"
          }, 
          {
            "type": "html",
            "id": "display",
            "label": "display"
          },
          {
            "type": "html",
            "id": "belt_icon",
            "label": "belt Icon"
          },
          {
            "type": "text",
            "id": "belt",
            "label": "belt"
          }, 
          {
            "type": "html",
            "id": "discbreak_icon",
            "label": "discbreak Icon"
          },{
            "type": "text",
            "id": "discbreak",
            "label": "discbreak"
          }, 
          {
            "type": "html",
            "id": "tires_icon",
            "default": "700",
            "label": "tires Icon"
          },
          {
            "type": "html",
            "id": "tires",
            "label": "tires"
          }
          ,{
            "type": "html",
            "id": "seat_icon",
            "label": "seat Icon"
          }, 
          {
            "type": "html",
            "id": "seat",
            "label": "seat"
          },
          {
            "type": "image_picker",
            "id": "color_icon",
            "label": "Color Image"
          },
          {
            "type": "html",
            "id": "color",
            "default": "Colours",
            "label": "Color Text"
          },
          {
            "type": "url",
            "id": "explore",
            "label": "explore link URL"
          }, {
            "type": "url",
            "id": "order",
            "label": "Order link URL"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Compare Select"
      }
    ]
  }
{% endschema %}